<template>
<div :class="[{ 'input-item-active': isFocus }, { 'input-item-error': error }, 'input-item']">
  <div class="label" v-show="value!==label && value" >{{ label }}</div>
  <select
      @change="$emit('change', $event.target.value)"
      :value="value"
      @focus="isFocus = true"
      @blur="handleBlur"
  >
    <option>{{ label }}</option>
    <option v-for="option in options" :key="option.value || option" :value="option.value || option">
      {{ option.name || option }}
    </option>
  </select>
</div>
</template>

<script>
export default {
  name: "IntelInput",
  props: {
    error: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: null
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      isFocus: false
    }
  },
  computed: {
    value1: function () {
      return this.value
    }
  },
  methods: {
    handleBlur () {
      this.$emit('blur')
      this.isFocus = false
    },
    handleChange (e) {
      console.log(e)
    }
  }
}
</script>

<style scoped>
.input-item {
  height: 60px;
  min-width: 300px;
  border: 1px solid #D7D7D7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px;
}
.input-item-active {
  border: 1px solid #0068B5;
}
.label {
  font-size: 14px;
  color: #999999;
}
.input-item-active .label {
  color: #0068B5;
}
select {
  border: none;
  background: none;
  font-size: 14px;
  color: #333333;
}
select:focus {
  outline: none;
}
input::placeholder {
  font-size: 14px;
  color: #333333;
}
.input-item-error {
  border: 1px solid #FF4D4F;
}
.input-item-error .label {
  color: #FF4D4F;
}
</style>
